/**
 * Stylesheet dedicated to the images inside the application pages. These style classes define the skeleton 
 * of the components and include CSS properties such as margin, padding, display type, dimensions 
 * and positioning. This idea is the one used by JQuery UI.
 * @author Clément HELIOU (clement.heliou@gmail.com)
 * @since 1.0
 */

/* Profile image */
.authorsNoteAccordionContent>img[class*="profile"] {
	float: right;
	height: 147px;
	margin-left: 6px;
}

/* Image's container of a technical data sheet or a gallery version of a photo */
.galleryContainer,.tdsContainer {
	position: relative;
}

/* Gallery version of a photo */
.galleryContainer>img {
	height: 190px;
	width: 304px;
}

/* Image of a technical data sheet */
.tdsContainer>img {
	height: 400px;
	width: 962px;
}

/* Overlay of the gallery version of a photo */
.galleryContainer .galleryOverlay {
	left: 2px;
	height: 40px;
	width: 304px;
}

/* Overlay of the gallery and technical data sheet versions of a photo */
.galleryContainer .galleryOverlay,.tdsContainer .tdsOverlay {
	bottom: 4px;
	position: absolute;
}

.galleryOverlay>.galleryOverlayDescription {
	float: left;
	padding: 2px;
}

.galleryOverlay>.galleryOverlayLink {
	float: right;
	padding: 3px;
}

/* Overlay of the technical data sheet version of a photo */
.tdsContainer .tdsOverlay {
	height: 80px;
	width: 100%;
}

.tdsContainer .tdsOverlay .tdsOverlayLine {
	padding: 10px;
}

.tdsContainer .tdsOverlay .tdsOverlayDescLine .leftPart {
	float: left;
}

.tdsContainer .tdsOverlay .tdsOverlayDescLine .rightPart {
	float: right;
}